<template>
    <div class="user_list"  @click="click_item($event)">
        <div>
            <img class="user_header_image" :src="item.friend_info.head_image || '/public/yonghu.png'" alt="">
        </div>
        <div>
            <div>{{ item.friend_info.username || "匿名" }}</div>
            <div>
                {{ item.friend_info.introduction || "这个人很懒，什么也没留下~"}}
            </div>
        </div>
        <div class="interact_box"  style="z-index: 101;" v-show="ShowInfo">
            <SHOW_INFO  style="z-index: 101;" :info="item"></SHOW_INFO>
        </div>      
    </div>
</template>

<script setup>
import SHOW_INFO from "./show_info.vue"
import { defineProps, inject, computed, } from 'vue';
// 直接注入,不应使用props,慢加载会导致问题,且直接注入更快
const chat=inject('chat')()
const props = defineProps({
    item: {
        type: Object,
        required: true,
    }
});
let ShowInfo = computed(() => {
    return chat.value.show_current_user_interact_box&&chat.value.get_current_user_interact_box()==props.item.room_info.room_id
})

const click_item = (e) => {
    // 修改仓库正在交互的房间/好友信息
    if (chat.value.get_current_user_interact_box() != props.item.room_info.room_id) {
        chat.value.show_current_user_interact_box =true
    } else { 
        chat.value.show_current_user_interact_box=!chat.value.show_current_user_interact_box
    }
    chat.value.set_current_user_interact_box(props.item.room_info.room_id)
}


</script>

<style scoped>
.user_list {
    display: flex;
    position: relative;
    height: 50px;
    width: 100%;
    font-size: 16px;
    margin: 3px 1px 3px 1px;
    padding: 2px;
    vertical-align: middle;
    border-radius: 5px;
    background-color: #f8f8f9;
    box-shadow: inset 0 0 2px 0px white;
    cursor: pointer;
    
}

.user_list:hover {
    background-color: #e8eaec;
    transition: background-color 0.3s ease-in-out;
}

.user_list>div:nth-child(2) {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    height: 100%;
    overflow: hidden; 
}

.user_list>div:nth-child(2)>div {
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user_list>div:nth-child(2) {
    gap: 2px;
}

.user_list>div:nth-child(2)>div:nth-child(1) {
    font-size: 15px;
    color: #17233d;
    font-weight: 500;
}

.user_list>div:nth-child(2)>div:nth-child(2) {
    font-size: 13px;
    padding-left: 5px;
    color: #515a6e;
}

.user_header_image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 5px;
    vertical-align: middle;
    object-fit: cover;
}

.interact_box{
    position: absolute;
    left: 150px;
    z-index: 101;
}

</style>